<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="main">
                    <el-row >
                        <el-col :span="4">
                            <el-tag>日志开关</el-tag>
                            <el-switch class="main-switch"
                                       :active-value="1"
                                       :inactive-value="0"
                                       active-color="#13ce66"
                                       inactive-color="#ff4949"
                                       v-model="logStwich"
                                       @change="logStwichClick"
                                       inactive-text="关闭"
                                       active-text="开启">
                            </el-switch>
                        </el-col>
                        <el-col :span="4">
                            <div>
                                <el-select v-model="level" placeholder="请选择级别" size="small" clearable>
                                    <el-option label="信息" value="信息"></el-option>
                                    <el-option label="警告" value="警告"></el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <span>
                                <el-select v-model="objectModule" placeholder="请选择模块" size="small" clearable>
                                    <el-option label="设备" value="设备"></el-option>
                                    <el-option label="监控项" value="监控项"></el-option>
                                    <el-option label="告警项" value="告警项"></el-option>
                                    <el-option label="未处理告警" value="未处理告警"></el-option>
                                    <el-option label="角色" value="角色"></el-option>
                                    <el-option label="用户" value="用户"></el-option>
                                    <el-option label="拓扑" value="拓扑"></el-option>
                                    <el-option label="知识" value="知识"></el-option>
                                    <el-option label="知识分类" value="知识分类"></el-option>
                                    <el-option label="性能分析报表" value="性能分析报表"></el-option>
                                    <el-option label="巡检报告" value="巡检报告"></el-option>
                                    <el-option label="告警统计报表" value="告警统计报表"></el-option>
                                    <el-option label="业务" value="业务"></el-option>
                                    <el-option label="数据库" value="数据库"></el-option>
                                </el-select>
                            </span>
                        </el-col>
                        <el-col :span="6">
                            <span class="dateBlock">
                                <el-date-picker
                                        v-model="dateValue"
                                        type="daterange"
                                        align="right"
                                        unlink-panels
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions"
                                        value-format="yyyy-MM-dd"
                                        size="small">
                                </el-date-picker>
                            </span>
                        </el-col>
                        <el-col :span="6">
                            <span class="input-suffix">
                                <el-button type="primary" size="small" style=" float: right;   margin-left: 10px" @click="searchClick('search')">查询</el-button>
                                <el-input  placeholder="请输入（操作人/对象名称）" size="small" style=" float: right; width: 200px;" class="filter-item" prefix-icon="el-icon-search" v-model="searchTitleText">
                                </el-input>
                            </span>
                        </el-col>
                    </el-row>
                    <el-row align="center" style="margin-top: 10px">
                        <el-table stripe :data="auditLogList" :row-style="{height:'30px'}"
                                  :cell-style="{padding:'5px'}" >
                            <el-table-column type="index" label="序号" align="center" :index="knowledgeIndexMethod" width="60"/>
                            <el-table-column prop="operation_time" label="操作时间" width="200" align="center" />
                            <el-table-column prop="level" label="级别"  align="center" />
                            <el-table-column
                                    prop="user_name"
                                    label="操作人"
                                    align="center"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="object"
                                    label="对象"
                                    align="center"
                                    :show-overflow-tooltip="true"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="object_name"
                                    label="对象名称"
                                    :show-overflow-tooltip="true"
                                    align="center"
                                    >
                            </el-table-column>
                            <el-table-column
                                    prop="object_type"
                                    label="操作类型"
                                    :show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="result"
                                    label="结果"
                                    :show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="duration"
                                    label="持续时间"
                                    width="100"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="description"
                                    label="描述"
                                    align="center"
                                    show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                :current-page="currentPage"
                                :page-sizes="[10, 15, 20]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total_num"
                                style="text-align: center"
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                        />
                    </el-row>
                </el-main>
                <vFootSpace />
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "AuditLog",
        data(){
            return {
                loading: true,
                auditLogList: [], // 审计日志列表
                currentPage: 1, // 当前页码
                pageSize: 15, // 页面大小
                total_num: 0, // 日志数量
                logStwich: 1, // 日志开关
                searchTitleText: '',// 文本搜索
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }, // 快捷选择
                dateValue: '', // 时间
                level: '', // 级别
                objectModule: '' ,// 对象模块

                // 历史查询
                preDateStart: '', // 时间
                preDateEnd: '', // 时间
                preLevel: '', // 级别
                preObjectModule: '' ,// 对象模块
                preSearchTitleText: '' ,// 文本搜索

            }
        },
        methods: {
            getAllOperationLogs(){
                this.$axios({
                    methods: "post",
                    url: '/opreationLog/getAllOperationLogs.action',
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }
                }).then(
                    (res) => {
                        if (res.data.status === true){
                            this.loading = false
                            this.auditLogList = res.data.content.logList
                            this.total_num = res.data.content.totalNum
                        }else{
                            this.$message.error("获取日志列表失败！")
                        }
                    }
                )
            },
            logStwichClick(){
                this.$axios.get('/opreationLog/logSwitchClick.action').then(
                    (res) => {
                        if (res.data.status === true){
                            if (res.data.content.logSwitch == 'false'){
                                this.logStwichSwitch = 0
                                sessionStorage.setItem("logSwitch", "false")
                                this.$message.info("审计日志功能关闭！")
                            }else {
                                this.logStwichSwitch = 1
                                sessionStorage.setItem("logSwitch", "true")
                                this.$message.success("审计日志功能开启！")
                            }
                        }else{
                            this.$message.error("日志操作失败！")
                        }
                    }
                )
            },
            // 分页
            handleCurrentChange(currentPage){
                //换页
                // 设置最新的页码
                this.currentPage = currentPage
                this.searchClick('pageChange')
            },
            // 首页页面显示数量
            handleSizeChange(val){
                this.pageSize = val
                this.currentPage = 1
                this.searchClick('pageChange')
            },
            // 首页序号连续
            knowledgeIndexMethod(index) {
                return index + (this.currentPage-1) * this.pageSize + 1;
            },
            // 初始化参数
            initLogStautus(){
                status = sessionStorage.getItem('logSwitch')
                this.logStwich = status === 'true' ? 1 : 0
            },
            // 点击查询
            searchClick(val){
                let startDate
                let endDate
                let searchType
                if (this.dateValue == '' || this.dateValue == null){
                    startDate= ''
                    endDate = ''
                }else{
                    startDate=  this.dateValue[0]
                    endDate =  this.dateValue[1]
                }
                if (val == 'search'){
                    searchType = 'search'
                    this.currentPage = 1

                    this.preDateStart = startDate, // 时间
                    this.preDateEnd = endDate, // 时间
                    this.preLevel = this.level, // 级别
                    this.preObjectModule = this.objectModule,// 对象模块
                    this.preSearchTitleText = this.searchTitleText ,// 文本搜索

                    this.$axios({
                        method: "post",
                        url: "/opreationLog/logSearch.action",
                        params: {
                            currentPage: this.currentPage,
                            pageSize: this.pageSize,
                            searchText: this.searchTitleText,
                            startDate: startDate,
                            endDate: endDate,
                            level: this.level,
                            objectModule: this.objectModule,
                            type: searchType
                        }
                    }).then((res) => {
                        if (res.data.status === true){
                            this.loading = false
                            this.auditLogList = res.data.content.logList
                            this.total_num = res.data.content.totalNum
                        }else{
                            this.$message.error("获取日志列表失败！")
                        }
                    })
                }else{
                    searchType = 'pageChange'
                    this.$axios({
                        method: "post",
                        url: "/opreationLog/logSearch.action",
                        params: {
                            currentPage: this.currentPage,
                            pageSize: this.pageSize,
                            searchText: this.preSearchTitleText,
                            startDate: this.preDateStart,
                            endDate: this.preDateEnd,
                            level: this.preLevel,
                            objectModule: this.preObjectModule,
                            type: searchType
                        }
                    }).then((res) => {
                        if (res.data.status === true){
                            this.loading = false
                            this.auditLogList = res.data.content.logList
                            this.total_num = res.data.content.totalNum
                        }else{
                            this.$message.error("获取日志列表失败！")
                        }
                    })
                }


            },


        },
        mounted() {
            this.getAllOperationLogs()
            this.initLogStautus()
        }
    }
</script>

<style scoped>
    .main{
        height: 88vh;
        margin-top: 60px;
        padding: 10px;
    }
    </style>
